<template>
    <div class="playlist">
        <!-- 歌单列表 -->
        <table>
            <tr v-for="(item, index) in playlists" :key="index">
                <td class="m1">
                    <i class="play" @click="playMusic(item)"></i>
                </td>
                <td class="m2">
                    <div class="pic">
                        <img :src="item.coverImgUrl" alt="">
                    <i class="mask" @click="$router.push(`/playlist/${item.id}`)"></i>
                    </div>
                </td>
                <td class="m3 ellipsis">
                    <a :title="item.name" @click="$router.push(`/playlist/${item.id}`)" v-html="highlight(item.name)"></a>
                </td>
                <td class="m4">
                    <div class="show">
                      <a title="添加到播放列表" class="a1"></a>
                      <a title="收藏" class="a2"></a>
                      <a title="分享" class="a3"></a>
                    </div>
                </td>
                <td class="m5">
                    <span>{{ item.trackCount }}首</span>
                </td>
                <td class="m6">
                    <div class="text ellipsis">
                        <span>by</span>
                        <a :title="item.creator.nickname" @click="$router.push(`/user/${item.creator.userId}`)">{{ item.creator.nickname }}</a>
                    </div>
                </td>
                <td class="m7">
                    <span>收藏：{{ item.bookCount | handleSub }}</span>
                </td>
                <td class="m8">
                    <span>收听：{{ item.playCount | handleCount }}</span>
                </td>
            </tr>
        </table>
        <MusicPlay :ids="ids" :imgUrl="imgUrl" :isPlay="isPlay" />
    </div>
</template>

<script>
import { PlaylistSearchApi, reqAllList } from "@/request/api";
import MusicPlay from "@/components/MusicPlay.vue";
export default {
    data () {
        return {
            playlists: [],
            ids: 0,
            imgUrl: "https://img2.baidu.com/it/u=1611088966,2458167776&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            isPlay: false,
            songs: [],
        }
    },
    components: {
        MusicPlay,
    },
    filters: { 
        handleSub(count){
            if(count >= 100000){
                count = (count - count%1000)/10000 + '万'
            }
            return count
        },
        handleCount(count){
            if(count >= 10000){
                count = (count - count%1000)/10000 + '万'
            }
            return count
        },
    },
    computed: {
        keyword() {
            return this.$route.params.keyword;
        }
    },
    watch: {
        keyword: {
            handler(newValue, oldValue){
                if(newValue !== oldValue){
                    PlaylistSearchApi(newValue).then((res) => {
                        // console.log(res);
                        this.playlists = res.data.result.playlists;
                    });
                }
            },
            immediate: true,
        }
    },
    // created() {
    //     PlaylistSearchApi(this.keyword).then((res) => {
    //         // console.log(res);
    //         this.playlists = res.data.result.playlists;
    //     });
    // },
    methods: {
        highlight(str) {
            // 正则表达式//中间的字符只是字符串
            // 如果需要动态创建一个正则表达式
            // new RegExp(str, rules) str是正则字符串，rules是匹配模式写在字符串中
            const reg = new RegExp(this.keyword, 'gi')
            const highStr = str.replace(reg, `<span style="color: #0c73c2;">${this.keyword}</span>`)
            return highStr
        },
        playMusic(item) {
            reqAllList(item.id).then((res) => {
                // console.log(res);
                this.songs = res.data.songs;
                this.ids = this.songs[0].id;
                this.imgUrl = this.songs[0].al.picUrl;
                this.isPlay = true;
            })
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.playlist {
    table {
        tr {
            width: 918px;
            height: 60px;
            display: flex;
            align-items: center;
            font-size: 12px;
            &:nth-of-type(even) {
                background: #f7f7f7;
            }
            &:nth-of-type(odd) {
                background: #fff;
            }
            &:hover .show {
                display: block !important;
            }
            &:hover {
                background-color: #f1f1f1;
                border: 1px solid #d3d3d3;
            }
        }
        td {
            padding: 5px 10px;
            height: 50px;
            line-height: 50px;
        }
        .m1 {
            width: 30px;
            text-align: center;
            .play {
                width: 17px;
                height: 17px;
                display: inline-block;
                background: url("@/assets/images/public/table.png") no-repeat;
                background-position: 0 -103px;
                &:hover {
                    cursor: pointer;
                    background-position: 0 -128px;
                }
            }
        }
        .m2 {
            width: 50px;
            .pic {
                position: relative;
                width: 50px;
                height: 50px;
                img {
                    width: 50px;
                    height: 50px;
                }
                .mask {
                    cursor: pointer;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 50px;
                    height: 50px;
                    display: block;
                    background: url("@/assets/images/public/coverall.png") no-repeat;
                    background-position: -160px 0;
                }
            }
        }
        .m3 {
            width: 220px;
            a {
                color: #333;
                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }
        .m4 {
            width: 80px;
            display: flex;
            align-items: center;
            .show {
                width: 69px;
                height: 18px;
                display: flex;
                display: none;
                a {
                  margin: 2px 5px 0 0;
                  width: 18px;
                  height: 16px;
                  display: block;
                  float: left;
                  background: url("../../assets/images/public/table.png") no-repeat;
                  &:hover {
                    cursor: pointer;
                  }
                }
                .a1 {
                  width: 13px;
                  height: 13px;
                  margin-top: 2px;
                  background: url("../../assets/images/public/icon.png") no-repeat;
                  background-position: 0 -700px;
                
                  &:hover {
                    background-position: -22px -700px;
                  }
                }
                .a2 {
                  background-position: 0 -174px;
                  &:hover {
                    background-position: -20px -174px;
                  }
                }
                .a3 {
                  background-position: 0 -195px;
                  &:hover {
                    background-position: -20px -195px;
                  }
                }
            }
        }
        .m5 {
            width: 40px;
            span {
                color: #999;
            }
        }
        .m6 {
            width: 150px;
            .text {
                width: 90px;
                span {
                    color: #666;
                    padding-right: 5px;
                }
                a {
                    color: #666;
                    &:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
            }
        }
        .m7 {
            width: 80px;
            span {
                color: #666;
            }
        }
        .m8 {
            width: 100px;
            span {
                color: #666;
            }
        }
    }
}
</style>